<template>
    <div>
        <Row>
            <div class="nav">
                <img src="../assets/img/logo_home.png" height="50" width="180" class="nav_logo">
                <div class="nav_Home">企业端生产管理系统</div>
                <div class="nav_Right">
                    <i-input icon="ios-search-strong" placeholder="搜索..." style="width: 200px" class="nav_Search"></i-input>
                    <router-link to="/table" class="icon_1"></router-link>
                    <router-link to="/home" class="icon_2"></router-link>
                    <router-link to="/home" class="icon_3"></router-link>
                    <Dropdown style="margin-left:200px">
                        <i-button type="primary" shape="circle" class="icon_4">
                        </i-button>
                        <Dropdown-menu slot="list">
                            <Dropdown-item>个人详情</Dropdown-item>
                            <Dropdown-item>所属单位</Dropdown-item>
                            <Dropdown-item disabled>删除账户</Dropdown-item>
                            <Dropdown-item>切换账户</Dropdown-item>
                            <Dropdown-item divided><a  @click="modal1 = true">退出登录</a></Dropdown-item>
                        </Dropdown-menu>
                    </Dropdown>
                     <Modal v-model="modal1" title="是否确认退出登录" @on-ok="ok" @on-cancel="cancel">
                        <P>点击"是"退出</P>
                        <P>点击"取消"继续停留此页面</P>
                    </Modal>
                </div>
            </div>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            modal1: false,
            logout: [
            ]
        }
    },
    methods: {
        //登出和注册功能    已经成功
        ok() {
            //this.$router.replace({ path: '/login' });
            let that = this;
            this.$ajax.get(this.api.oauth.loginOut).then(function(response) {      
                     that.$Message.info('退出成功！');        
                     that.$router.push({ path: '/' })    
                }).catch(function(response) {
                     that.$Message.info(response.Msg);
                     console.log(response);
                });
            sessionStorage.clear();
            localStorage.removeItem("token");
            localStorage.removeItem("UserKey");
            localStorage.clear();
        },
        cancel() {
            this.$Message.info('取消退出');
        }
    }
}
</script>
<style scoped>
.nav {
    flex: 1;
    width: 100%;
    min-height: 60px;
    background-color: #598df1;
    position: relative;
}

.nav_logo {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
}
.nav_Home {
    width: 500px;
    height: 60px;
    font-size: 16px;
    font-weight: 600;
    line-height: 75px;
    color: #fff;
    text-indent: 1em;
    position: absolute;
    top: 0px;
    left: 200px;
}
.nav_Right {
    width: 500px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 0;
}
.nav_Search {
    margin: 15px;
}
.icon_1 {
    width: 24px;
    height: 26px;
    display: block;
    background: url('../assets/img/icon-loggin.png');
    position: absolute;
    top: 17px;
    left: 245px;
}
.icon_2 {
    width: 24px;
    height: 26px;
    display: block;
    background: url('../assets/img/icon-notification.png');
    position: absolute;
    top: 17px;
    left: 295px;
}

.icon_3 {
    width: 24px;
    height: 26px;
    display: block;
    background: url('../assets/img/icon-setting.png');
    position: absolute;
    top: 17px;
    left: 345px;
}

.icon_4 {
    display: block;
    width: 36px;
    height: 36px;
    background-image: url('../assets/img/users.png');
    position: absolute;
    top: -24px;
    right: -10px;
}
</style>